.create-game-base {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
}

.create-game-wrapper {
  position: absolute;
  width: 100%;
  height: 94%;
  bottom: 0;
  z-index: 999; // background-image: url(../../img/createGame/create-game-di.png);
  // background-size: cover;
  .modal {
    top: 0;
    .title-wrapper {
      height: 2rem;
      text-align: center;
      .title {
        margin-top: -2.4rem;
        width: 18rem;
      }
    }
    .close {
      width: 2.5rem;
      position: absolute;
      top: 0.4rem;
      right: 0.2rem;
    }
    .modal-wrapper {
      height: 92%;
      width: 100%;
      font-size: 1.1rem;
      box-sizing: border-box;
      display: flex;

      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
       &.is-android {
        .small-gap {
          font-size: 0.9rem!important;
        }
        .create-tip {
          font-size: 0.7rem;
        }
      }
      .rule-row {
        color: #8d383d;
        margin: 0.8rem 0.6rem 0.3rem;
        flex-basis: 100%;
        .choice {
          font-size: 1.08rem;
        }
        &.large-gap {
          // margin-top: 1.5rem;
          .rule-bottom-line {
            margin-top: 1rem;
          }
        }
        &.small-gap {
          // margin-top: 1.5rem;
          margin: 0.1rem 0.5rem 0;
          .choice {
            font-size: 0.9rem;
          }
          &.btn {
            margin-top: 0.5rem;
          }
          .rule-bottom-line {
            margin: 0.1rem;
          }
          .start-game-btn {
            background-size: contain;
            background-repeat: no-repeat;
            width: 12.4rem;
            height: 3.6rem;
          }
        }
        .rule-name {
          margin-left: 0.9rem;
        }
        .choose-circle {
          vertical-align: middle;
          width: 2rem;
        }
        .choose-circle-small {
          vertical-align: middle;
          width: 1.6rem;
        }
        .choose-text {
        }
        &.btn {
          margin-top: 1.5rem;
          display: flex;
          justify-content: space-around;
          align-content: center;
        }
        .start-game-btn,
        .back-hall-btn {
          width: 10rem;
          height: 3.2rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .create-tip {
    margin: 0rem 1rem;
    font-size: 0.8rem;
    color: #407ad1;
  }
}

.price {
  font-size: 1rem;
}

.half-font {
  display: inline-block;
}

.rule-bottom-line {
  width: 95%;
  height: 1px;
  margin: 0.5rem auto 0;
}

.is-android {
  .create-game-wrapper .modal .title-wrapper {
    height: 1.4rem;
  }
  .create-game-wrapper .modal .modal-wrapper .rule-row .choose-circle {
    width: 1.6rem;
  }
  .rule-row span {
    font-size: 0.8rem;
  }
  .create-game-wrapper .modal .modal-wrapper .rule-row .start-game-btn,
  .create-game-wrapper .modal .modal-wrapper .rule-row .back-hall-btn {
    width: 9rem;
    height: 2.9rem;
  }
  .create-game-wrapper .modal .modal-wrapper .rule-row {
    margin: 0.4rem 0.6rem 0.3rem
  }
}

@media screen and (min-width: 420px) {
  .create-game-wrapper {
    position: absolute;
    .modal-wrapper {
      height: 92%;
      width: 100%;
      padding: 0.8rem 2rem 0.3rem;
      .rule-row {
        color: #8d383d;
        .choice {
          font-size: 1.16rem;
        }
      }
    }
  }
}

@media screen and (min-width: 300px) {
  .create-game-wrapper {
    .modal-wrapper {
      padding: 0.8rem 1rem 0.3rem;
    }
  }
}
